<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#map_canvas {
	height: 100%
}
</style>
<title>Google Maps JavaScript API Example</title>
<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA"
	type="text/javascript"></script>
<script type="text/javascript">
	//         
	var map;

	//创建一个自定义的GIcon
	var myIcon = new GIcon();
	var zoom = 13;
	var lat = 30.1536;
	var lng = 120.1124;
	//前景图片
	myIcon.image = "../images/shop1.jpg";
	//阴影图片
	myIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	//前景图片大小，长x宽
	myIcon.iconSize = new GSize(12, 20);
	//阴影图片大小，长x宽
	myIcon.shadowSize = new GSize(12, 20);

	//以下两个属性很难解释，读者可自行调整其数值以便理解其意义
	// myIcon锚定点相对于myIcon图片左上角的像素距离
	myIcon.iconAnchor = new GPoint(6, 10);
	//信息窗口相对于myIcon图片左上角的像素距离
	//关于信息窗口会在以后介绍
	myIcon.infoWindowAnchor = new GPoint(5, 1);

	
	function load() {
		if (GBrowserIsCompatible()) {
			map = new GMap2(document.getElementById("map_canvas"));
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.addControl(new GScaleControl());
			map.enableScrollWheelZoom();
			var geoPoint0 = new GLatLng(lat, lng);
			var geoPoint1 = new GLatLng(lat, lng+0.01);//创建另一个地理坐标geoPoint1

			map.setCenter(geoPoint0, zoom);

			var marker0 = new GMarker(geoPoint0, {
				title : "我有titile了"
			});
			var marker1 = new GMarker(geoPoint1,//创建自定义的GMarker
			{
				icon : myIcon,
				title : "Gxg"
			});
	
			map.addOverlay(marker0);
			//显示自定义了图标的地标对象marker1
			map.addOverlay(marker1);
			
			GEvent.addListener(marker0, "click", function() {
				marker0.openInfoWindowHtml("<iframe src='content.jsp' height='131px' width='323px'></iframe>");

				});

		}
	}
	//
</script>
</head>
<!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露-->
<body onload="load()" onunload="GUnload()">
	<!--以下id为map的DIV元素即为Google地图的容器-->
	<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>